<template>
  <ul class="list-view-box">
    <li class="list-item" v-for="v in videoList" :key="v.id" @click="linkBack(v)">
      <div class="img-box"><img :src="(v.bgimg || v.imagUrl)+ '?x-oss-process=image/resize,m_fixed,h_194,w_340' " alt=""></div>
      <div class="text-box">
        <p>{{ v.title }}</p>
        <!-- <p>{{v.pvSum || v.fwCount|| 0}}观看</p> -->
      </div>
    </li>

  </ul>
</template>

<script>
export default {
  props: {
    videoList: Array,

  },
  data() {
    return {

    };
  },
  computed: {},
  created() {
  },

  mounted() {

  },
  methods: {
    linkBack(item) {
      const { vid, id } = item;
      this.$router.push({
        path: `/${this.$channel}/liveBack/${vid ? vid : id}?dzhPage=true`
      });
    }
  },
  watch: {

  },
};
</script>
<style lang="less" scoped>
.list-view-box {
  width: 100%;
  height: auto;
  padding: 0 32px 0px;

  .list-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 21px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 24px 24px 24px 24px;

    .img-box {
      width: 340px;
      height: 193px;

      img {
        width: 340px;
        height: 193px;
        border-radius: 24px 24px 24px 24px;
      }
    }

    .text-box {
      margin-left: 31px;

      p {
        &:nth-of-type(1) {
          height: 126px;
          font-size: 28px;
          font-weight: 400;
          color: #333333;
          line-height: 40px;
          margin-top: 15px;
          margin-bottom: 10px;
          padding-right: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        &:nth-of-type(2) {
          font-size: 24px;
          color: #000000;
          line-height: 36px;
          opacity: 0.5;
        }
      }
    }
  }
}</style>
